 // 浏览历史

<template>
  <view class="page">
    <view class="items-box" v-for="(item, index) in list" :key="index">
      <view class="items-time">{{ item.look_date }}</view>
      <view class="items1-box">
        <view
          class="item1"
          v-for="items in item.goods_list"
          :key="items"
          @click.stop="toDetail(items.id)"
        >
          <view class="item1_img">
            <image
              :src="
                items.goods_image.startsWith('http')
                  ? items.goods_image
                  : baseURL + items.goods_image
              "
              class="cont_img"
            />
          </view>
          <view class="item1-right">
            <view class="item1_title">
              {{ items.goods_name }}
            </view>

            <view class="item1_money">
              <view class="price">
                <view
                  class="price-box"
                  v-if="items.price !== '' && show && priceStatus"
                >
                  <text class="price1">￥</text>
                  <text class="price2">{{ items.price }}</text>
                  <text class="digit">.{{ items.decimal }}</text>
                </view>
              </view>
              <view class="t-icon t-icon-a-" @tap.stop="showPop(items)"></view>
            </view>
          </view>
          <!-- ￥{{ items.price }}</text> -->
        </view>
      </view>
    </view>
    <!-- 空白页 -->
    <dht-empty type="no_history" v-if="noData"></dht-empty>
    <!-- 选择规格弹出框 -->
    <pop-choose :goods="goods" v-model="show1"></pop-choose>
  </view>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      noData: false,
      list: [],
      show: true,
      show1: false,
      goods: null,
      page: 1,
      hasMore: true,
      baseURL: ''
    }
  },
  onLoad() {
    this.baseURL = this.$baseURL
    this.getlist()
    this.getbinding()
  },
  methods: {
    onReachBottom() {
      if (!this.hasMore) return
      this.page++
      this.getlist()
    },
    // 弹出框
    showPop(goods) {
      console.log('goods', goods)
      this.goods = goods
      this.goods.goods_image = goods.goods_image.startsWith('http')
        ? goods.goods_image
        : this.$baseURL + goods.goods_image

      this.show1 = true
    },
    // 判断是否绑定
    getbinding() {
      let urseinfo = uni.getStorageSync('userInfo')
      console.log(urseinfo.binding)
      if (urseinfo.binding == 2) {
        this.show = false
      }
    },
    // 获取列表
    async getlist() {
      const res = await this.$http.post('/api/kuerp/order/index/getHistory', {
        page: this.page
      })
      if (res.code == 200) {
        if (res.data.list.length === 0) {
          this.hasMore = false
        }
        this.list = [...this.list, ...res.data.list]
        this.noData = !this.list.length
      }
    },
    // 商品详情
    toDetail(id) {
      uni.navigateTo({ url: '/pages/home/homeGoods/goodsDetail?id=' + id })
    }
  },
  computed: {
    ...mapState(['priceStatus'])
  }
}
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  padding-bottom: 70rpx;
  overflow: hidden;
  background: #f7f7f7;
}
.items-box {
  margin-top: 54rpx;
  overflow: hidden;
  &:first-child {
    margin-top: 0;
  }
  .items-time {
    font-size: 32rpx;
    font-weight: 600;
    margin-left: 28rpx;
    margin-top: 20rpx;
    padding-bottom: 14rpx;
  }
  .items1-box {
    // margin-top: 34rpx;
    display: flex;
    flex-wrap: wrap;
    .item1 {
      width: 694rpx;
      height: 200rpx;
      background: #ffffff;
      border-radius: 12rpx;
      margin: 0 auto 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .item1_img {
        width: 160rpx;
        height: 160rpx;
        // background-color: #909399;
        border-radius: 12rpx;
        margin-left: 20rpx;
        margin-right: 20rpx;
        float: left;
      }
      .item1-right {
        flex: 1;
        height: 160rpx;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        padding-right: 20rpx;
        .item1_title {
          color: #111111;
          display: -webkit-box; /*弹性伸缩盒子模型显示*/
          -webkit-box-orient: vertical; /*排列方式*/
          -webkit-line-clamp: 2; /*显示文本行数*/
          overflow: hidden; /*溢出隐藏*/
        }
        .item1_money {
          margin-top: 44rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .price {
            .price-box {
              // display: flex;
              // justify-content: center;
              // align-items: center;
              .price1 {
                font-size: 25rpx;
                color: #fe3d23;
                font-weight: 600;
              }
              .price2 {
                font-size: 32rpx;
                color: #fe3d23;
                font-weight: 600;
              }
              .digit {
                font-size: 25rpx;
                color: #fe3d23;
                font-weight: 600;
              }
            }
          }
          .t-icon {
            width: 44rpx;
            height: 44rpx;
            float: right;
          }
        }
      }
    }
  }
}
</style>
